<template>
    <div>
        <div>
            <el-card>
                <el-row :gutter="20">
                    <el-col :span="2">
                        <el-button icon="el-icon-plus" size="mini" type="primary" @click="handleAdd">新增
                        </el-button>
                    </el-col>
                </el-row>
                <br/>
                <el-row :gutter="20">
                    <el-col :span="6">
                        <el-input size="mini" clearable v-model="queryInfo.id" placeholder="请输入要查询的患者编号"
                                  @change="handleQuery"></el-input>
                    </el-col>
                    <el-col :span="6">
                        <el-input size="mini" clearable v-model="queryInfo.name" placeholder="请输入要查询的患者名称"
                                  @change="handleQuery"></el-input>
                    </el-col>
                    <el-col :span="6">
                        <el-button icon="el-icon-search" size="mini" type="primary" @click="handleQuery">查询</el-button>
                        <el-button icon="el-icon-refresh" size="mini" type="info" @click="resetQuery">重置</el-button>
                    </el-col>
                </el-row>
                <el-table :data="tableData" stripe size="mini" class="log_table">
                    <el-table-column label="序号" prop="id" width="130"></el-table-column>
                    <el-table-column label="名字" prop="name" width="70"></el-table-column>
                    <el-table-column label="年龄" prop="age" width="70"></el-table-column>
                    <el-table-column label="性别" prop="sex" width="70"></el-table-column>
                    <el-table-column label="身份证" prop="idCard" width="150" align="center"></el-table-column>
                    <el-table-column label="电话" prop="phone" width="120" align="center"></el-table-column>
                    <el-table-column label="感染源头" prop="infectSource" width="170" align="center"></el-table-column>
                    <el-table-column label="感染最初时间" prop="startTime" width="100" align="center"></el-table-column>
                    <el-table-column label="治疗编号" prop="treatId" width="150" align="center">
                        <template slot-scope="scope">
                            <router-link :to="`/components/treatmentInfo/${scope.row.treatId}`" class="link-type">
                                <span>{{ scope.row.treatId }}</span>
                            </router-link>
                        </template>
                    </el-table-column>
                    <el-table-column label="确诊地点" prop="confirmedPlace" width="200" align="center"></el-table-column>
                    <el-table-column label="所属区域" prop="belongArea" width="120" align="center"></el-table-column>
                    <el-table-column label="患者状态" prop="patientState" width="120" align="center"></el-table-column>
                    <el-table-column label="操作" align="center" width="170">
                        <template v-slot="scope">
                            <el-button size="mini" icon="el-icon-view" type="text"
                                       @click="showDetail(scope.row.id)">详情
                            </el-button>
                            <el-button size="mini" icon="el-icon-edit" type="text"
                                       @click="handleUpdate(scope.row.id)">修改
                            </el-button>
                            <el-button size="mini" icon="el-icon-delete" type="text"
                                       @click="handleDelete(scope.row.id)">删除
                            </el-button>

                        </template>
                    </el-table-column>
                </el-table>
                <!-- 分页区 -->
                <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="page.current"
                    :page-sizes="[5, 10, 15, 20]"
                    :page-size="page.size"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="page.total"
                />
            </el-card>
        </div>
        <add-patient-info :showAddPatientInfo.sync="showAddPatientInfo" :sexDateDic.sync="sexDicInfo"
                          :areaDateDic.sync="areaDicInfo"
                          :patientStateDic.sync="patientStateDicInfo"
                          :editButtonShow.sync="editButtonShow"
                          :treatIdShow.sync="treatIdShow"
                          :addButtonShow.sync="addButtonShow"
                          :id.sync="id"
                          :titleInfo.sync="titleInfo"
                          @showTableInfo="showTableInfo"/>
    </div>
</template>

<script>
import {mapActions} from "vuex";
import AddPatientInfo from './components/addPatientInfo.vue';

export default {
    components: {
        AddPatientInfo,
    },
    data() {
        return {
            id: '',
            titleInfo: '新增感染者信息',
            editButtonShow: false,
            showAddPatientInfo: false,
            addButtonShow: false,
            treatIdShow: false,
            tableData: [],
            sexDicInfo:[],
            areaDicInfo:[],
            patientStateDicInfo:[],
            page: {
                size: 10,
                current: 1,
                total: 0
            },
            queryInfo: {
                id: undefined,
                name: undefined,
            },

        }
    },
    async mounted() {
        // 查询用户列表
        this.handleQuery()
        // 查询字典值
        this.init()
    },
    methods: {
        ...mapActions("patientInfo", ["patientInfoList","deletePatientInfo"]),
        ...mapActions("dict", ["optionListCode"]),
        async init() {
            let dicInfo = ['sex','countyArea','patientState']
            let res = await this.optionListCode(dicInfo)
            this.sexDicInfo = res.sex
            this.areaDicInfo = res.countyArea
            this.patientStateDicInfo = res.patientState
        },
        // 更新
        handleUpdate(id) {
            this.showAddPatientInfo = true
            this.editButtonShow = true
            this.treatIdShow = true
            this.id = id
            this.titleInfo = '修改感染者信息'

        },
        // 详情
        async showDetail(id) {
            this.titleInfo = '感染者信息详情信息'
            this.showAddPatientInfo = true
            this.treatIdShow = true
            this.id = id
        },
        // 删除
        handleDelete(id) {
            this.$confirm('此操作将删除该感染者信息与该感染者治疗信息, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.deleteInfo(id)
                this.$message({
                    message: '删除成功',
                    type: 'success'
                });
                this.handleQuery()
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });
            });
        },
        // 删除
        async deleteInfo(id) {
            let res = await this.deletePatientInfo(id)
            return res.data
        },
        showTableInfo() {
            this.resetQuery()
        },
        // 添加患者信息
        handleAdd() {
            this.showAddPatientInfo = true
            this.addButtonShow = true
        },
        // 重置查询
        resetQuery() {
            this.queryInfo = {
                id: undefined,
                name: undefined
            }
            this.page = {
                current: 1
            }
            this.handleQuery()
        },
        // 查询角色分页
        async handleQuery() {
            let params = Object.assign(this.page, this.queryInfo)
            let res = await this.patientInfoList(params);
            this.tableData = res.data.records;
            this.page.total = res.data.total;
            this.page.size = res.data.size;
            this.page.current = res.data.current;
        },
        //修改每页显示条数
        handleSizeChange(size) {
            this.page.size = size
            this.handleQuery()
        },
        //修改当前第几页
        handleCurrentChange(current) {
            this.page.current = current
            this.handleQuery()
        },
    }
}
</script>

<style scoped>

</style>
